<template>
  <div>
  <el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect">
    <div class="user-menu-box" v-for="menu in menus" :key="menu.id">
      <el-menu-item v-if="!menu.child" :index="menu.path">
        <icon :name="menu.icon" :w="20" :h="20"></icon>
        <span slot="title" v-text="menu.name"></span>
      </el-menu-item>
      <el-submenu v-if="menu.child" :index="menu.path">
        <template slot="title">
          <icon :name="menu.icon" :w="20" :h="20"></icon>
          <span slot="title" v-text="menu.name"></span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="subMenu in menu.child" :key="subMenu.id" v-text="subMenu.name"
                        :index="subMenu.path"></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </div>
  </el-menu>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/backstage' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="o in breadcrumbList" :key="o.id">{{o.name}}
    </el-breadcrumb-item>
  </el-breadcrumb>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        activeMenu: '',
        indexBreadcrumbs: [],
        menus: [{
          id: '1',
          name: '门户管理',
          icon: 'menhuguanli',
          path: '#2',
          child: [{
            id: '1-1',
            name: '轮播图',
            path: '/backstage/protaManage/turns'
          }, {
            id: '1-2',
            name: '基础数据',
            path: '/backstage/protaManage/basis'
          }, {
            id: '1-3',
            name: '分类管理',
            path: '/backstage/protaManage/classify'
          }, {
            id: '1-4',
            name: '内容发布',
            path: '/backstage/protaManage/content'
          }]
        }, {
          id: '2',
          name: '我的云盘',
          icon: 'yunpan',
          path: '/backstage/yunManage'
        }, {
          id: '3',
          name: '管理菜单',
          icon: 'shezhi',
          path: '/backstage/menusManage'
        }, {
          id: '4',
          name: '编辑板块',
          icon: 'fabuzhongxin',
          path: '/backstage/editPlate'
        }]
      }
    },
    watch: {
      $route () {
        this.handChange()
      }
    },
    computed: {
      breadcrumbList () {
        let breadcrumbs = []
        let menuList = this.menus
        this.indexBreadcrumbs.map(item => {
          for (let i = 0; i < menuList.length; i++) {
            if (item === menuList[i].path) {
              breadcrumbs.push(menuList[i])
              if (menuList[i].child) {
                menuList = menuList[i].child
              }
              break;
            }
          }
        })
        return breadcrumbs
      }
    },
    methods: {
      handChange () {
        this.$emit('hand-change', this.breadcrumbList)
      },
      handleSelect (index, indexPath) {
        this.indexBreadcrumbs = indexPath
      }
    },
    created () {
      this.handChange()
    }
  }
</script>

<style scoped>

</style>
